<template>
  <v-chart class="chart" :option="option"/>
</template>

<script>
import {use} from "echarts/core";
import {CanvasRenderer} from "echarts/renderers";
import {PieChart} from "echarts/charts";
import {LegendComponent, TitleComponent, TooltipComponent} from "echarts/components";
import VChart, {THEME_KEY} from "vue-echarts";
import {defineComponent, ref} from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);

export default defineComponent({
  name: "Analysis",
  components: {
    VChart
  },
  provide: {
    [THEME_KEY]: "light"
  },
  setup: () => {
    const option = ref({
      title: {
        text: "影评等级",
        left: "center"
      },
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        orient: "vertical",
        left: "left",
        data: ["力荐", "推荐", "还行", "较差", "很差"]
      },
      series: [
        {
          name: "影评等级",
          type: "pie",
          radius: "55%",
          center: ["50%", "60%"],
          data: [
            {value: 12043, name: "力荐"},
            {value: 5252, name: "推荐"},
            {value: 1024, name: "还行"},
            {value: 393, name: "较差"},
            {value: 188, name: "很差"}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)"
            }
          }
        }
      ]
    });

    return {option};
  }
})
</script>

<style scoped>
.chart {
  height: 400px;
}
</style>
